<template>
  <MyModal ref="myModal" :top="30">
    <template #content>
      <div style="display: grid; place-items: center">
        <div style="margin-bottom: 20px">
          <QuestionCircleOutlined style="color: #7417be; font-size: 22px; margin-right: 12px" />
          <span style="font-size: 16px">请在新窗口中登录闲鱼账户完成授权</span>
        </div>
      </div>
      <div style="text-align: right; margin-bottom: 15px">
        <a-button style="width: 80px" @click="cancel">取消</a-button>
        <a-button style="width: 130px; margin-left: 10px" type="primary" @click="handleSubmit">
          已完成授权
        </a-button>
      </div>
    </template>
  </MyModal>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import * as accountApi from '@/api/account'
import { message } from 'ant-design-vue'

const myModal = ref()

let taskId = ref<string>('')

const showModal = (id: string) => {
  taskId.value = id
  myModal.value?.showModal()
}

const emit = defineEmits<{
  refresh: []
}>()

defineExpose({
  showModal,
})

const handleSubmit = async () => {
  const params = {
    taskId: taskId.value,
  }
  try {
    let { state, data, message: msg } = await accountApi.getAuthResult(params)
    if (state === 200) {
      if (data && data.status && data.status == '1') {
        message.success('授权成功')
      } else {
        message.success('正在授权...')
      }
      myModal.value?.cancelModal()
      emit('refresh')
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
}

const cancel = () => myModal.value?.cancelModal()
</script>
